<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="635">
    <div class="flex">
      <div class="mr-10px">
        <el-image
          class="rounded-4px w-[100px] h-[100px]"
          :fit="'fill'"
          :src="state.selectedSku?.picUrl || defaultProductImg"
        />
      </div>
      <div class="flex flex-col justify-center">
        <div>
          <el-text line-clamp="1">
            <SpuTag
              :type="DICT_TYPE.PRODUCT_SPU_TYPE"
              :value="state.selectedSku.spuType"
              v-if="state.selectedSku.spuType != 2 && state.selectedSku.spuType != 4"
            />
            <SpuTag
              v-if="state.selectedSku.spuType == 2"
              :type="DICT_TYPE.PRODUCT_SPU_TYPE2"
              :value="state.selectedSku!.skuType"
            />
            <SpuTag
              v-if="state.selectedSku.spuType == 4"
              :type="DICT_TYPE.PRODUCT_SPU_TYPE4"
              :value="state.selectedSku!.skuType"
            />
            {{ state.selectedSku.spuName }}
          </el-text>
        </div>

        <div class="custom-text-14 mt-10px">
          ID:{{ state.selectedSku.id }}
          <el-divider direction="vertical" v-if="state.selectedSku.properties" />
          <el-tag v-if="state.selectedSku.properties">
            {{ filterCardAttributes(state.selectedSku, true, true) }}
          </el-tag>
        </div>
        <div class="custom-text-14 mt-10px">
          实售价格:
          <el-text> {{ fenToYuan(state.selectedSku.realPrice) }}元</el-text>
          <span v-if="state.selectedSku.leavePrice > 0" class="color-primary">
            <el-divider direction="vertical" /> 欠款:{{
              fenToYuan(state.selectedSku.arrearsPrice)
            }}元</span
          >
          <el-divider direction="vertical" />
          <el-text>
            {{ state.selectedSku.leftStatus }}
          </el-text>
          <el-divider direction="vertical" />
          <el-text>
            {{ state.selectedSku.enableStatus }}
          </el-text>
        </div>
      </div>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import * as WalletApi from '@/api/pay/wallet/balance'

import { fenToYuan } from '@/utils'
import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
const { filterCardAttributes } = useProductUtils()
/** 购物车信息 */
const state = reactive({
  selectedSku: {} as any // 选中的 SKU
})

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('详情') // 弹窗的标题
const formType = ref('') // 表单的类型：create - 新增；update - 修改

/** 打开弹窗 */
const open = async (formData?: any) => {
  const data = await WalletApi.getWalletDetail({ id: formData.assetsId })

  dialogTitle.value = data.spuName

  resetState()
  setSelectedSku(data)
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 销售逻辑

/**设置当前选中的sku */
const setSelectedSku = (form) => {
  state.selectedSku = form
}
/** 重置State */

const resetState = () => {
  state.selectedSku = {}
}
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  text-align: center;
}
</style>
